<script>
import { api } from '@/api';
import { Popup, Toast } from 'vant';

export default {
  props: {
    direction: {
      type: String,
      default: 'left'
    },
    avatar: {
      type: String,
      default: ''
    },
    nickname: {
      type: String,
      default: ''
    },
    amount: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fingerPrint: {
      type: String,
      default: ''
    },
    isGroup: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Popup
  },
  computed: {
  },
  data() {
    return {
      show: false,
      opened: false,
      opening: false
    }
  },
  methods: {
    async handleOpen() {
      if (this.disabled || this.opening) return
      this.opening = true
      const { success } = await api.chat.openRedEnvelope({ fingerPrint: this.fingerPrint, ...(this.isGroup ? { GroupId: this.$route.params.username } : {}) })
      this.opening = false
      this.opened = success
      if (success) {
        this.$emit('success')
      } else {
        Toast.fail({ message: '红包打开失败' })
      }
    },
    handleShow() {
      if (this.disabled) return
      this.show = true
    }
  },
}
</script>

<template>
  <div
    class="red-envelope"
    :style="{
      flexDirection: direction === 'right' ? 'row-reverse' : 'row',
      paddingTop: isGroup ? '0px' : undefined,
    }"
  >
    <img
      class="red-envelope-image"
      src="../assets/images/red-envelope-message.png"
      :style="{
        transform: direction === 'right' ? 'scaleX(-1)' : 'scaleX(1)',
      }"
      @click="handleShow"
    >

    <div
      class="red-envelope-text"
      :style="{
        ...(direction === 'right' ? { left: '15px' } : { right: '15px' })
      }"
      @click="handleShow"
    >
      恭喜发财，大吉大利
    </div>

    <Popup v-model="show" position="center" style="background-color: transparent;">
      <div class="red-envelope-open" @click="handleOpen">
        <img style="width: 100%;" src="../assets/images/red-envelope.jpg" alt="">

        <div class="red-envelope-info">
          <div class="red-envelope-user">
            <img class="red-envelope-user-avatar" :src="avatar" alt="">
            <div>{{ nickname }}</div>
          </div>

          <div
            class="red-envelope-open-text"
            :style="{
              opacity: opened ? 1 : 0
            }"
          >
            恭喜发财，大吉大利
          </div>

          <div
            class="red-envelope-open-amount"
            :style="{
              opacity: opened ? 1 : 0
            }"
          >
            {{ amount.toFixed(2) }}
          </div>
        </div>
      </div>
    </Popup>
  </div>
</template>

<style lang="less" scoped>
.red-envelope {
  display: flex;
  padding-top: 20px;
  position: relative;

  .red-envelope-image {
    width: 240px;
    height: 80.5px;
  }

  .red-envelope-text {
    position: absolute;
    bottom: 42px;
    color: white;
    font-size: 16px;
  }

  .red-envelope-open {
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .red-envelope-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #f9f0ba;
  }

  .red-envelope-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    width: 100%;
    justify-content: center;
    padding-top: 20px;
  }

  .red-envelope-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
  }
  
  .red-envelope-open-text {
    font-size: 20px;
    text-align: center;
    padding: 20px;
    transition: all ease-in-out .3s;
  }
  
  .red-envelope-open-amount {
    padding-top: 20px;
    font-size: 56px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);
    transition: all ease-in-out .3s;
  }
}
</style>
